﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择框样式</title>
    <style>
            .form-box label {
                font-size: 13px;
                cursor: pointer;
            }

            .form-box label i {
                font-size: 13px;
                font-style: normal;
                display: inline-block;
                width: 13px;
                height: 13px;
                text-align: center;
                line-height: 13px;
                color: #fff;
                vertical-align: middle;
                margin: -2px 2px 1px 0px;
                border: #1abc9c 1px solid;
            }

            .form-box input[type="checkbox"], .form-box input[type="radio"] {
                display: none;
            }

            .form-box input[type="radio"] + i {
                border-radius: 7px;
            }
            /*选中状态*/
            .form-box input[type="checkbox"]:checked + i, .form-box input[type="radio"]:checked + i {
                background: #1abc9c;
            }
            /*禁用状态*/
            .form-box input[type="checkbox"]:disabled + i, .form-box input[type="radio"]:disabled + i {
                border-color: #ccc;
            }
            /*禁用选中状态*/
            .form-box input[type="checkbox"]:checked:disabled + i, .form-box input[type="radio"]:checked:disabled + i {
                 border-color: #ccc;
                background: #ccc;
            }
    </style>
</head>
<body>
    <div class="form-box">
        <label><input type="checkbox"><i>✓</i>复选框</label><br>
        <label><input type="checkbox" checked><i>✓</i>复选框</label><br>
        <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
        <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
        <label><input type="radio" name="abc"><i>✓</i>单选框</label><br>
        <label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>
        <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
        <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>

    </div>
</body>
</html>